<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>翻转卡片</title>
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/vanilla-tilt.min.js"></script>
</head>

<body>
  <div id="contenner">
    <button id="hf">换肤</button>
    <turn-card v-for='item in userInfo' :key='item.name' :data='item' data-tilt />
  </div>
  <!-- 卡片组件的模板 -->
  <template id="turnCard">
    <div class="card-box" data-tilt data-tilt-glare="false" data-tilt-max-glare="0.5" data-tilt-speed="400"
      data-tilt-scale="1.1" data-tilt-perspective="500" data-tilt-max="15" data-tilt-startX="0" data-tilt-startY="10"
      data-tilt-scale="1.1">
      <div class="card">
        <!-- 背面 -->
        <div class="back"></div>
        <!-- 正面 -->
        <div class="front">
          <!-- 最后就是这里，也要和上面你自定义的变量保持一致 -->
          <div style="width: 100%;" v-if='isShow'>
            <h2>{{ data.name }}</h2>
            <p>性别：{{data.gender}}</p>
            <p>年龄：{{data.age}}</p>
            <p>爱好：{{data.hobby}}</p>
            <p>特长：{{data.speciality}}</p>
            <p>体重：{{data.weight}}</p>
            <p>颜值：{{data.faceScore}}</p>
          </div>
          <div style="width: 100%;" v-else>
            <h2>这里是详情</h2>
            <img :src="data.avatar" alt="头像">
            <p>信息：{{data.info}}</p>
          </div>
          <button @click='detail'>{{btnText}}</button>
        </div>
      </div>
    </div>
  </template>
</body>
<script>
  // 注册卡片组件
  Vue.component('turnCard', {
    props: ['data'],
    template: '#turnCard',
    data() {
      return {
        isShow: true,
        btnText: '详情'
      }
    },
    watch: {
      isShow(newVal) {
        newVal ? this.btnText = '详情' : this.btnText = '返回';
      }
    },
    methods: {
      detail() {
        this.isShow = !this.isShow;
      }
    },
  });

  var app = new Vue({
    el: '#contenner',
    data: {
      userInfo: [
        { name: '李盼盼', gender: '女', age: 18, hobby: '吃饭、睡觉、打豆豆', speciality: '腿特长', weight: '保密', faceScore: '暴击', avatar: './images/lpp.jpg', info: '此处省略几千字' },
        { name: '小笑残虹', gender: '男', age: 18, hobby: '吃饭、睡觉、打豆豆', speciality: '腿特长', weight: '保密', faceScore: '暴击', avatar: './images/ly.jpeg', info: '此处省略几千字' },
        { name: '小可爱', gender: '女', age: 18, hobby: '吃饭、睡觉、打豆豆', speciality: '腿特长', weight: '保密', faceScore: '暴击', avatar: './images/lmy.jpg', info: '此处省略几千字' },
      ]
    },
    methods: {},
  });

  VanillaTilt.init(document.querySelectorAll(".card-box"), {
    max: 25,
    speed: 400
  });

  var oBtn = document.getElementById('hf');

  function ranColor() {
    return "rgb(" + Math.floor(Math.random() * (255 - 0 + 1) + 0) + ", " + Math.floor(Math.random() * (255 - 0 + 1) + 0) + ", " + Math.floor(Math.random() * (255 - 0 + 1) + 0) + ")";
  }

  oBtn.onclick = function () {
    let color1, color2, color3, color4;
    color1 = ranColor();
    color2 = ranColor();
    color3 = ranColor();
    color4 = ranColor();
    let bgStr = `linear-gradient(to right, ${color1}, ${color2})`;
    let cardBgStr = `linear-gradient(to top, ${color3} 0%, ${color4} 100%)`;
    document.body.style.setProperty('--bgColor', bgStr);
    document.body.style.setProperty('--color', cardBgStr);
  }

</script>
</html>